import React, { Component } from 'react';
import Form from './Form'
import List from './List'

class Todolist extends Component {

  constructor() {
    super()
    this.id = 0;
    this.state = {
      list: []
    }
  }

  handleAdd = (txt) => {
    console.log(txt);
    this.state.list.push({
      id: this.id++,
      name: txt
    })
    this.setState({})
  }

  handleDel = (id) => {
    console.log(id)
    this.state.list.forEach((item, index) => {
      if (item.id === id) {
        this.state.list.splice(index, 1);
      }
    })
    this.setState({})
  }

  render() {
    return (
      <>
        <Form handleAdd={this.handleAdd}></Form>
        <List list={this.state.list} handleDel={this.handleDel}></List>
      </>
    );
  }
}

export default Todolist;